<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .user-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
        }
        .info-group {
            margin-bottom: 15px;
        }
        .info-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .info-group p {
            margin: 0;
            padding: 8px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }
        .btn:hover {
            background-color: #45a049;
        }
        .btn-logout {
            background-color: #f44336;
        }
        .btn-logout:hover {
            background-color: #d32f2f;
        }
        .message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="user-container">
        <h2>用户信息</h2>
        <div id="message" class="message"></div>
        
        <div class="info-group">
            <label>用户名:</label>
            <p id="username">-</p>
        </div>
        
        <div class="info-group">
            <label>角色:</label>
            <p id="role">-</p>
        </div>
        
        <div class="info-group">
            <label>Token:</label>
            <p id="token" style="word-break: break-all;">-</p>
        </div>
        
        <button id="validateBtn" class="btn">验证Token</button>
        <button id="logoutBtn" class="btn btn-logout">退出登录</button>
    </div>

    <script>
        // 页面加载时获取用户信息
        window.onload = function() {
            const token = localStorage.getItem('token');
            const username = localStorage.getItem('username');
            const role = localStorage.getItem('role');
            
            if (!token) {
                // 如果没有token，跳转到登录页面
                window.location.href = '/login.html';
                return;
            }
            
            // 显示用户信息
            document.getElementById('username').textContent = username;
            document.getElementById('role').textContent = role;
            document.getElementById('token').textContent = token;
        };
        
        // 验证token
        document.getElementById('validateBtn').addEventListener('click', function() {
            const token = localStorage.getItem('token');
            const messageDiv = document.getElementById('message');
            
            fetch('/api/auth/validate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ token })
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Token验证失败');
                }
            })
            .then(data => {
                // 显示成功消息
                messageDiv.textContent = 'Token验证成功！';
                messageDiv.className = 'message success';
                messageDiv.style.display = 'block';
            })
            .catch(error => {
                // 显示错误消息
                messageDiv.textContent = 'Token验证失败，请重新登录';
                messageDiv.className = 'message error';
                messageDiv.style.display = 'block';
                
                // 3秒后跳转到登录页面
                setTimeout(() => {
                    localStorage.removeItem('token');
                    localStorage.removeItem('username');
                    localStorage.removeItem('role');
                    window.location.href = '/login.html';
                }, 3000);
            });
        });
        
        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', function() {
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            localStorage.removeItem('role');
            window.location.href = '/login.html';
        });
    </script>
</body>
</html>